<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mysql-json-axios</title>

</head>
<body>
<div id="app">

      <table>
            <thead>
               <th>编号</th>
               <th>名称</th>
               <th>价格</th>
            </thead>

           <tbody>
              <tr v-for="(item,index) in list">
                   <td>
                       {{index+1}}
                   </td>
                  <td>

                      {{item.name}}
                  </td>
                  <td>
                      {{item.price}}
                  </td>
              </tr>

           </tbody>


      </table>

</div>
</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/axios.js"></script>
<script>

    var app = Vue.createApp({
         data(){ //data:function()
             return {
                  message:'hello',
                  list:[]
             }
         },
        mounted(){



             //
            //  v1 :
            // var _this = this;
             //
             // axios({
             //     url:'../0.data/products.json',
             //     method:'get',
             //     dataType:'json'
             // }).then(function (res){ // response
             //
             //       _this.list = res.data;
             // })

            axios({
                // http://localhost:63342/htmldemo/vue/0.data/products.json
                url:'../0.data/products.json',
                method:'get',
                dataType:'json'
            }).then((res)=>{
                this.list = res.data;
            })



        }
    });

    app.mount('#app')



</script>

</html>